﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="nav_block">
        <div class="wrapper">
            <section class="menuBlock">
                <div class="menuBlock__logo">
                    <a href="#">IDOO</a>
                </div>
                <nav class="headerMenu">
                    <ul class="headerMenu__list">
                        <li class="headerMenu__item">
                            <a href="#">Home</a>
                        </li>
                        <li class="headerMenu__item">
                            <a href="#Service">Services</a>
                        </li>
                        <li class="headerMenu__item">
                            <a href="#Portfolio">Portfolio</a>
                        </li>
                        <li class="headerMenu__item">
                            <a href="#About">About</a>
                        </li>
                        <li class="headerMenu__item">
                            <a href="#clients">Contacts</a>
                        </li>
                    </ul>
                    <div class="burgerMenu">
                        <button class="burgerMenu__btn">menu</button>
                        <ul class="burgerMenu__list">
                            <li class="burgerMenu__item">
                                <a href="#">Home</a>
                            </li>
                            <li class="burgerMenu__item">
                                <a href="#Services">Services</a>
                            </li>
                            <li class="burgerMenu__item">
                                <a href="#Portfolio">Portfolio</a>
                            </li>
                            <li class="burgerMenu__item">
                                <a href="#About">About</a>
                            </li>
                            <li class="burgerMenu__item">
                                <a href="#clients">Contacts</a>
                            </li>
                        </ul>

                    </div>
                </nav>
                <button class="signUpBtn">Sign Up</button>
            </section>
        </div>
    </div>
    <header class="mainHeader">
        <div class="wrapper">

            <section class="headerContentBlock"></section>
        </div>
    </header>

    <!--111111111111111111111111111111                                                                    -->

    <div class="project_our_service">
        <div class="wrapper">
            <div class="our_serviceHeader">
                <a name="Service"></a>
                <div class="our_service">
                    <div class="word_our_service">
                        <h2>OUR</h2>
                        <h2>SERVICES.</h2>
                        <span></span>
                    </div>
                </div>
                <div class="feature">
                    <div class="feature_item">
                        <div class="feature_item_img">
                            <span>
                                <img class="img_feature_item" src="img/png1.png" />
                            </span>
                        </div>
                        <div class="feature_item_text">
                            <h1>FEATURE1</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing e</p>
                        </div>
                    </div>
                    <div class="feature_item">
                        <div class="feature_item_img">
                            <span>
                                <img class="img_feature_item" src="img/png2.png" />
                            </span>
                        </div>
                        <div class="feature_item_text">
                            <h1>FEATURE2</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing e copy</p>
                        </div>
                    </div>
                    <div class="feature_item">
                        <div class="feature_item_img">
                            <span>
                                <img class="img_feature_item" src="img/png3.png" />
                            </span>
                        </div>
                        <div class="feature_item_text">
                            <h1>FEATURE3</h1>
                            <p>Incididunt ut labore et dolore magna aliqua. Ut enim </p>
                        </div>
                    </div>
                    <div class="feature_item">
                        <div class="feature_item_img">
                            <span>
                                <img class="img_feature_item" src="img/png4.png" />
                            </span>
                        </div>
                        <div class="feature_item_text">
                            <h1>FEATURE4</h1>
                            <p>Incididunt ut labore et dolore magna aliqua. Ut enim </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="nav_service_menu">
        <a name="Portfolio"></a>
        <div class="wrapper">
            <nav class="service_menu">
                <!--<div class="button_adaptive_one">-->
                <div class="button">
                    <a href="#works"><img src="img/png5.png" /></a>
                </div>
                <div class="button">
                    <a href="#testimonial"><img src="img/png6.png" /></a>
                </div>
                <div class="button">
                    <a href="#team"><img src="img/png7.png" /></a>
                </div>
                <!--</div>-->
                <!--<div class="button_adaptive_two">-->
                <div class="button">
                    <a href="#number"><img src="img/png8.png" /></a>
                </div>
                <div class="button">
                    <a href="#skills"><img src="img/png9.png" /></a>
                </div>
                <div class="button">
                    <a href="#clients"><img src="img/png10.png" /></a>
                </div>
                <!--</div>-->
            </nav>
        </div>
    </div>



    <!--                                 -->


    <div class="nav_our_works">
        <a name="works"></a>
        <div class="wrapper">
            <div class="our_works">
                <div class="word_our_works">
                    <h2>OUR</h2>
                    <h2>WORKS.</h2>
                    <span></span>
                </div>
                <nav class="menu">
                    <ul class="menu_list">
                        <li class="menu_items">
                            <div class="menu_items_height__btn">
                                <button class="menu_items__btn">All</button>
                            </div>
                        </li>
                        <li class="menu_items">
                            <div class="menu_items_height__btn">
                                <button class="menu_items__btn">Website</button>
                            </div>
                        </li>
                        <li class="menu_items">
                            <div class="menu_items_height__btn">
                                <button class="menu_items__btn">Branding</button>
                            </div>
                        </li>
                    </ul>
                    <div class="burgerMenu_works">
                        <button class="burgerMenu_works__btn">menu</button>
                        <ul class="burger_menu_works_list">
                            <li class="burger_menu_items">
                                <button class="burger_menu_items__btn">All</button>
                            </li>
                            <li class="burger_menu_items">
                                <button class="burger_menu_items__btn">Website</button>
                            </li>
                            <li class="burger_menu_items">
                                <button class="burger_menu_items__btn">Branding</button>
                            </li>
                        </ul>
                    </div>
                </nav>
                <div class="menu_project">
                    <div class="menu_project_item">
                        <div class="menu_project_item__img">
                            <img src="img/images.jfif">
                        </div>
                        <div class="workDescr">
                            <h3 class="workDescr__title">Name project</h3>
                            <p class="workDescr__text">designed by Authour | May 23, 2014</p>
                        </div>
                    </div>
                    <div class="menu_project_item">

                    </div>
                    <div class="menu_project_item">

                    </div>
                    <div class="menu_project_item">

                    </div>
                    <div class="menu_project_item">

                    </div>
                    <div class="menu_project_item">

                    </div>
                </div>
                <div class="add_project">
                    <button>+</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 22222222222222222222222222222222222222222222222222222222222 -->

    <div class="nav_block_testimonial">
        <a name="testimonial"></a>
        <div class="wrapper">
            <div class="testimonial">
                <div class="personal_testimonial">
                    <div class="text_testimonial">
                        <p>“Sed ut perspiciatis unde omnis iste natus error sit </p>
                        <p> voluptatem accusantium doloremque laudantium, </p>
                        <p> totam rem aperiamvolptatem."</p>
                    </div>
                    <div class="avatar_testimonial">
                        <div class="avatar_testimonial_img">
                            <img src="img/png20.png" alt="avatar" />
                        </div>
                        <div class="avatar_testimonial_name">
                            <p>kirill ponomarenko</p>
                        </div>
                        <div class="avatar_testimonial_btn">
                            <button></button>
                            <button></button>
                            <button></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--  3123213213122222222222222222222222222222222 -->

    <div class="nav_block_team">
        <a name="team"></a>
        <div class="wrapper">
            <div class="our_team">
                <div class="word_our_team">
                    <h2>OUR</h2>
                    <h2>TEAM.</h2>
                    <span></span>
                </div>
                <div class="teams_info">
                    <div class="team_info">
                        <div class="photo_info">
                            <div class="photo_info__photo">
                                <img src="img/jpg21.jpg" alt="user photo">
                            </div>
                            <ul class="social_icons">
                                <li class="social_icons__item">
                                    <a href="https://twitter.com/?lang=uk" target="_blank">
                                        <img src="img/icons/twitter.png" alt="twitter">
                                    </a>
                                </li>
                                <li class="social_icons__item">
                                    <a href="https://uk-ua.facebook.com/" target="_blank">
                                        <img src="img/icons/facebook.png" alt="facebook">
                                    </a>
                                </li>
                                <li class="social_icons__item">
                                    <a href="https://www.instagram.com/?hl=uk" target="_blank">
                                        <img src="img/icons/instagram.png" alt="instagramm">
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="text_info">
                            <h3 class="text_info__title">Anton jyk</h3>
                            <p class="text_info__profession">CEO & Founder</p>
                            <p class="text_info__about">
                                Lorem ipsum dolor sit amet, consectetur adipisicing
                                elit, sed do eiusmod tempor incididunt ut labore et dolore
                                magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris.
                            </p>
                        </div>
                    </div>
                    <div class="team_info">
                        <div class="photo_info">
                            <div class="photo_info__photo">
                                <img src="img/jpg21.jpg" alt="user photo">
                            </div>
                            <ul class="social_icons">
                                <li class="social_icons__item">
                                    <a href="https://twitter.com/?lang=uk" target="_blank">
                                        <img src="img/icons/twitter.png" alt="twitter">
                                    </a>
                                </li>
                                <li class="social_icons__item">
                                    <a href="https://uk-ua.facebook.com/" target="_blank">
                                        <img src="img/icons/facebook.png" alt="facebook">
                                    </a>
                                </li>
                                <li class="social_icons__item">
                                    <a href="https://www.instagram.com/?hl=uk" target="_blank">
                                        <img src="img/icons/instagram.png" alt="instagramm">
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="text_info">
                            <h3 class="text_info__title">Anton jyk</h3>
                            <p class="text_info__profession">CEO & Founder</p>
                            <p class="text_info__about">
                                Lorem ipsum dolor sit amet, consectetur adipisicing
                                elit, sed do eiusmod tempor incididunt ut labore et dolore
                                magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris.
                            </p>
                        </div>
                    </div>
                    <div class="team_info">
                        <div class="photo_info">
                            <div class="photo_info__photo">
                                <img src="img/jpg21.jpg" alt="user photo">
                            </div>
                            <ul class="social_icons">
                                <li class="social_icons__item">
                                    <a href="https://twitter.com/?lang=uk" target="_blank">
                                        <img src="img/icons/twitter.png" alt="twitter">
                                    </a>
                                </li>
                                <li class="social_icons__item">
                                    <a href="https://uk-ua.facebook.com/" target="_blank">
                                        <img src="img/icons/facebook.png" alt="facebook">
                                    </a>
                                </li>
                                <li class="social_icons__item">
                                    <a href="https://www.instagram.com/?hl=uk" target="_blank">
                                        <img src="img/icons/instagram.png" alt="instagramm">
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="text_info">
                            <h3 class="text_info__title">Anton jyk</h3>
                            <p class="text_info__profession">CEO & Founder</p>
                            <p class="text_info__about">
                                Lorem ipsum dolor sit amet, consectetur adipisicing
                                elit, sed do eiusmod tempor incididunt ut labore et dolore
                                magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="add_team">
                    <button>+</button>
                </div>
            </div>
        </div>
    </div>

    <!--  123213213124124124124 -->

    <div class="nav_block_number">
        <a name="number"></a>
        <div class="wrapper">
            <div class="number">
                <div class="number_items_adaptive_one">
                    <div class="number_items">
                        <div class="number_items_img">
                            <img src="img/png24.png" alt="">
                        </div>
                        <div class="number_items_counter">
                            <p>2009</p>
                        </div>
                        <div class="number_items_name">
                            <p>Perspiciatis</p>
                        </div>
                    </div>
                    <div class="number_items">
                        <div class="number_items_img">
                            <img src="img/png25.png" alt="">
                        </div>
                        <div class="number_items_counter">
                            <p>13,562</p>
                        </div>
                        <div class="number_items_name">
                            <p>Comments</p>
                        </div>
                    </div>
                </div>
                <div class="number_items_adaptive_two">
                    <div class="number_items">
                        <div class="number_items_img">
                            <img src="img/png26.png" alt="">
                        </div>
                        <div class="number_items_counter">
                            <p>8,710</p>
                        </div>
                        <div class="number_items_name">
                            <p>Coffee cups</p>
                        </div>
                    </div>
                    <div class="number_items">
                        <div class="number_items_img">
                            <img src="img/png27.png" alt="">
                        </div>
                        <div class="number_items_counter">
                            <p>715</p>
                        </div>
                        <div class="number_items_name">
                            <p>Awards</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 214124134124124124 -->

    <div class="nav_block_skills">
        <div class="wrapper">
            <div class="our_skills">
                <a name="skills"></a>
                <div class="word_our_skills">
                    <h2>OUR</h2>
                    <h2>SKILLS.</h2>
                    <span></span>
                </div>
                <div class="our_skills_content">
                    <div class="graph_skills">
                        <div class="skills_item">
						<div class="skills_item_adaptive_one">
                            <div class="graph_skills_item">
                                <img class="img_feature_item" src="img/png31.png" />
                                <p>75</p>
                            </div>
                            <div class="graph_skills_item">
                                <img class="img_feature_item" src="img/png32.png" />
                                <p>25</p>
                            </div>
							</div>
							<div class="skills_item_adaptive_two">
                            <div class="graph_skills_item">
                                <img class="img_feature_item" src="img/png33.png" />
                                <p>75</p>
                            </div>
                            <div class="graph_skills_item">
                                <img class="img_feature_item" src="img/png30.png" />
                                <p>50</p>
                            </div>
                        </div>
						</div>
                        <div class="about_our_skills">
                            <a name="about"></a>
                            <h3>Something about our skills</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                Excepteur sint occaecat cupidatat non proident.
                            </p>
                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
                                eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.
                            </p>

                        </div>
                    </div>
                    <div class="skills__btns">
                        <div class="our_skills__btns">
                            <div class="skills_btns__item">
                                <div class="our_skills__item-btn">
                                    <button>Totam rem aperiam eaque</button>
                                    <div class="our_skills__item-text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit vestibulum lectus at maximus. Suspendisse eleifend dui eget nulla molestie, at aliquam libero mollis. Nunc venenatis non erat iaculis pretium.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="our_skills__btns">
                            <div class="skills_btns__item">
                                <div class="our_skills__item-btn">
                                    <button>Nemo enim ipsam voluptatem</button>
                                    <div class="our_skills__item-text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit vestibulum lectus at maximus. Suspendisse eleifend dui eget nulla molestie, at aliquam libero mollis. Nunc venenatis non erat iaculis pretium.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="our_skills__btns">
                            <div class="skills_btns__item">
                                <div class="our_skills__item-btn">
                                    <button>Ut enim ad minima veniam</button>
                                    <div class="our_skills__item-text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit vestibulum lectus at maximus. Suspendisse eleifend dui eget nulla molestie, at aliquam libero mollis. Nunc venenatis non erat iaculis pretium.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="our_skills__btns">
                            <div class="skills_btns__item">
                                <div class="our_skills__item-btn">
                                    <button>Quis nostrum exercitationem ullam</button>
                                    <div class="our_skills__item-text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit vestibulum lectus at maximus. Suspendisse eleifend dui eget nulla molestie, at aliquam libero mollis. Nunc venenatis non erat iaculis pretium.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="our_skills__btns">
                            <div class="skills_btns__item">
                                <div class="our_skills__item-btn">
                                    <button>Neque porro quisquam est qui</button>
                                    <div class="our_skills__item-text">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit vestibulum lectus at maximus. Suspendisse eleifend dui eget nulla molestie, at aliquam libero mollis. Nunc venenatis non erat iaculis pretium.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 231241251353141412 -->

        <div class="nav_block_ads">
            <div class="wrapper">
                <div class="ads">
                    <div class="Enter_ads">
                        <input type="text" placeholder="Enter your e-mail here..." name="Email">
                    </div>
                    <div class="Subscribe_ads">
                        <input class="contact_Subscribe" type="Submit" value="Subscribe">
                    </div>
                </div>
            </div>
        </div>

        <!-- 231241251353141412 -->

        <div class="nav_block_clients">
            <a name="clients"></a>
            <div class="wrapper">
                <div class="clients">
                    <div class="clients_block">
                        <a href="#" target="_blank">
                            <img src="img/png28.png" alt="WB">
                        </a>
                    </div>
                    <div class="clients_block">
                        <a href="#" target="_blank">
                            <img src="img/png28.png" alt="WB">
                        </a>
                    </div>
                    <div class="clients_block">
                        <a href="#" target="_blank">
                            <img src="img/png28.png" alt="WB">
                        </a>
                    </div>
                    <div class="clients_block">
                        <a href="#" target="_blank">
                            <img src="img/png28.png" alt="WB">
                        </a>
                    </div>
                    <div class="clients_block">
                        <a href="#" target="_blank">
                            <img src="img/png28.png" alt="WB">
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 231241251353141412 -->

        <div class="nav_block_contact">
            <div class="wrapper">
                <div class="Contact_us">
                    <div class="word_Contact_us">
                        <h2>CONTACT</h2>
                        <h2>US.</h2>
                        <span></span>
                    </div>
                    <div class="Contact">
                        <p>123A Building, Road Street, Orlando District, US </p>
                        <p>+01 234 567 89-+01 234 567 89| contact@book.com</p>
                    </div>
                    <div class="Contact_link">
                        <a href="https://twitter.com/?lang=uk" target="_blank"><img class="Contact_link_item" src="img/png11.png" alt="twitter" /></a>
                        <a href="https://uk-ua.facebook.com/" target="_blank"><img class="Contact_link_item" src="img/png12.png" alt="facebook" /></a>
                        <a href="https://www.pinterest.com/" target="_blank"><img class="Contact_link_item" src="img/png13.png" alt="pinterest" /></a>
                        <a href="https://www.youtube.com" target="_blank"><img class="Contact_link_item" src="img/png14.png" alt="youtube" /></a>
                        <a href="https://plus.google.com" target="_blank"><img class="Contact_link_item" src="img/png15.png" alt="google" /></a>
                        <a href="https://www.instagram.com/?hl=uk" target="_blank"><img class="Contact_link_item" src="img/png16.png" alt="instagram" /></a>
                        <a href="https://www.skype.com" target="_blank"><img class="Contact_link_item" src="img/png17.png" alt="skype" /></a>
                    </div>
                    <div class="contact_us_input">
                        <div class="contact_data">
                            <input type="text" placeholder="EMAIL" name="Email">
                            <input type="text" placeholder="NAME" name="Name">
                        </div>
                        <div class="contact_data_two">
                            <textarea placeholder="MESSAGE"></textarea>
                            <input class="contact_submit" type="submit" value="Submit">
                        </div>
                    </div>


                </div>
            </div>
        </div>

        <!-- 231241251353141412 -->
        <div class="nav_block_footer">
            <div class="wrapper">
                <footer class="footer">
                    <div class="footer_IDOO">
                        <a href="#">IDOO</a>
                    </div>
                    <div class="footer_rights">
                        <p>© 2014 IDDO. All rights resevered.</p>
                    </div>
                    <div class="footer_Designed">
                        <p> Designed by DZOAN.</p>
                    </div>
                    <img src="img/png29.png">
                </footer>
            </div>
        </div>

        <!-- 231241251353141412 -->
</body>
</html>